<template>
  <el-menu-item :index="fullPath" @click="handleLink()">
    <template #title>
      <span>{{ item.name }}</span>
    </template>
  </el-menu-item>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { isExternal } from '@/utils/route'

export default defineComponent({
  name: 'VanMenuItem',
  props: {
    item: {
      type: Object,
      required: true
    },
    fullPath: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const route = useRouter()
    const handleLink = function() {
      if (isExternal(props.item.path)) {
        window.open(props.item.path)
      } else if (isExternal(props.fullPath)) {
        window.open(props.fullPath)
      } else {
        if (route.currentRoute.value.path !== props.fullPath) {
          route.push({ path: props.fullPath })
        }
      }
    }
    return { handleLink }
  }
})
</script>
